<template>
  <div v-if="showPage">
    <el-form ref="form" label-width="120px" label-position="left">
      <el-row :gutter="20">
        <template v-for="(item, index) in props.docConfigLineList">
          <el-col :span="8" :key="index" v-if="props.docConfigLineList.length > 0">
            <el-form-item :label="item.fieldName" :prop="item.fieldCode">
              <el-input style="width：100%" v-model.trim="item.fieldNamevalue" :placeholder="t('keys.pleaseEnter')" clearable></el-input>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </div>
</template>
<script setup>
import { ref, nextTick, onMounted } from 'vue'
const props = defineProps({
  componentObject: {
    // 返回的对象值
    type: Object,
    default() {
      return {}
    }
  },
  docConfigLineList: {
    // 返回的渲染页面数据和值
    type: Array
  }
})
const showPage = ref(false)

setTimeout(() => {
  nextTick(() => {
    if (props.docConfigLineList && JSON.stringify(props.componentObject) != '{}') {
      props.docConfigLineList.forEach((item) => {
        item.fieldNamevalue = props.componentObject[item.fieldCode] || ''
      })
      showPage.value = true
    }
  })
}, 300)
</script>
<style lang="scss" scoped></style>
